<template>
  <div class="wf-box">
    <!-- 显示车身图 -->
    <div class="img-box1" v-show="!isclinkLeft && !isclinkRight">
      <img
        src="https://ms.bdimg.com/pacific/0/pic/-924649164_1220028373.png?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00"
      />
    </div>
    <div class="img-box2" v-show="isclinkLeft || isclinkRight">
      <!-- <div class="img-box2"> -->
      <!-- 车身小部件 -->
      <div
        v-for="(itemL, indexL) in part"
        :key="indexL + 'l'"
        v-show="isclinkLeft"
        class="img-box"
        @click="partPush(itemL)"
      >
        <img :src="itemL.src" />
        <h6 class="title" :class="{ on: itemL.check }">{{ itemL.title }}</h6>
      </div>

      <!-- 车身凹陷 -->
      <div
        v-for="(itemR, indexR) in depression"
        :key="indexR + 'r'"
        v-show="isclinkRight"
        class="img-box"
        @click="depressionPush(itemR)"
      >
        <img :src="itemR.src" />
        <h6 class="title" :class="{ on: itemR.check }">{{ itemR.title }}</h6>
      </div>
    </div>
    <!-- 只要选择了车身小部件或车身凹陷选择都见显示这个，隐藏车身图 -->
    <div class="text-box">
      <div class="text-left">
        <div @click="clinkLeft">
          车身小部件
          <van-icon name="arrow-up" v-if="isclinkLeft" />
          <van-icon name="arrow-down" v-else />
        </div>
      </div>
      <div class="text-right">
        <div @click="clinkright">
          车身凹陷选择
          <van-icon name="arrow-up" v-if="isclinkRight" />
          <van-icon name="arrow-down" v-else />
        </div>
      </div>
      <van-row>
        <van-col
          span="8"
          class="shop"
          @click="shopClink(1)"
          :class="{ shopOn: curId == 1 }"
          >4S店</van-col
        >
        <van-col
          span="8"
          class="shop"
          @click="shopClink(2)"
          :class="{ shopOn: curId == 2 }"
          >综合修理店</van-col
        >
        <van-col
          span="8"
          class="shop"
          @click="shopClink(3)"
          :class="{ shopOn: curId == 3 }"
          >快修店</van-col
        >
      </van-row>

      <van-list finished-text="没有更多了">
        <van-cell v-for="(item, index) in list" :key="index">
          <div @click="chooseShop(item)">
            <van-image
              fit="cover"
              position="left"
              :src="item.src"
              class="item-img"
            />
            <div class="item-box">
              <p>{{ item.name }}</p>
              <p>{{ item.address }}</p>
              <div class="serve">
                <div>服务客户数：{{ item.customerNumber }}</div>
                <van-rate v-model="item.value" icon="like" void-icon="like-o" />
              </div>
              <div class="price">
                <div>
                  自费价格：
                  <p>{{ item.selfExpense }} /元</p>
                </div>
                <div>
                  保险价格：
                  <p>{{ item.insuranceExpense }} /元</p>
                </div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      list4S: [
        {
          name: "aaa",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "bbb",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "bdd",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "fff",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 1242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "eee",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "ttt",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 24222,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
      ],
      comprehensive: [
        {
          name: "1111",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "b2222222222bb",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "333333333",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "fff444444444444",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 1242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "5555555555",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "6666666666",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 24222,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
      ],
      renovate: [
        {
          name: "豆腐干士大夫",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "撒旦发射点",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "肺结核",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "电话发给",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 1242,
          insuranceExpense: 235,
          value: 3,
          src: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        },
        {
          name: "日剧有人提议",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 242,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
        {
          name: "的有机统一",
          address: "dizhi",
          customerNumber: 21,
          selfExpense: 24222,
          insuranceExpense: 235,
          value: 3,
          src: "https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1842380526.jpg",
        },
      ],
      curId: "1",
      isclinkLeft: false,
      isclinkRight: false,
      part: [
        {
          id: "1",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "2",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "3",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "4",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "5",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "6",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "7",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
        {
          id: "8",
          title: "右反光镜",
          src: "https://img2.baidu.com/it/u=3116699095,2862677591&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500",
          check: false,
        },
      ],
      depression: [
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
        {
          title: "车门凹陷",
          src: "https://img1.baidu.com/it/u=2007015417,2975206631&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
          check: false,
        },
      ],
      checkPart: [],
      checkDepression: [],
    };
  },
  methods: {
    chooseShop(item){
      console.log(item);
      this.$router.push({
        path:'/confirm/order',
        query:{
          storeInformation:item,
          checkPart:this.checkPart,
          checkDepression:this.checkDepression,
          hardText:'确认订单'
        }
      })
    },
    clinkLeft() {
      this.isclinkLeft = !this.isclinkLeft;
      this.isclinkRight = false;
    },
    clinkright() {
      this.isclinkRight = !this.isclinkRight;
      this.isclinkLeft = false;
    },
    partPush(item) {
      console.log(item);
      console.log(this.checkPart.indexOf(item));
      let exist = this.checkPart.indexOf(item);
      console.log("下标", exist);
      if (exist == -1) {
        item.check = true;
        this.checkPart.push(item);
        // console.log("增加");
      } else if (exist != -1) {
        item.check = false;
        this.checkPart.splice(exist, 1);
        // console.log("减少");
      }
      // console.log("完成", this.checkPart);
    },
    depressionPush(item) {
      console.log(this.checkDepression.indexOf(item));
      let exist = this.checkDepression.indexOf(item);
      console.log("下标", exist);
      if (exist == -1) {
        item.check = true;
        this.checkDepression.push(item);
        console.log("增加");
      } else if (exist != -1) {
        item.check = false;
        this.checkDepression.splice(exist, 1);
        console.log("减少");
      }
      console.log("完成", this.checkDepression);
    },
    shopClink(id) {
      this.curId = id;
      if (this.curId == 1) {
        this.list = this.list4S;
      } else if (this.curId == 2) {
        this.list = this.comprehensive;
      } else {
        this.list = this.renovate;
      }
    },
  },
  created() {
    this.list = this.list4S;
  },
};
</script>

<style lang="scss" scoped>
.wf-box {
  background-color: rgb(250, 250, 250);
  .img-box1 {
    width: 160px;
    height: 120px;
    margin: 50px auto;
    // background-color: #aaa;
    img {
      width: 140px;
      height: 100px;
      margin: 10px;
      // background-color: #bbb;
    }
  }
  .img-box2 {
    width: 350px;
    height: 200px;
    margin: 10px auto;
    // background-color: rgb(231, 231, 231);
    .img-box {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      margin-top: 12px;
      float: left;
      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
      .title {
        position: relative;
        top: -26px;
        left: 14px;
      }
      .on {
        color: red;
      }
    }
    & > .img-box:nth-child(4n) {
      margin-right: 0;
    }
  }
  .text-box {
    .text-left,
    .text-right {
      width: 50%;
      float: left;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #ccc;
    }
    .text-right {
      box-sizing: border-box;
      border-left: 1px solid #aaa;
    }
    .shop {
      border-right: 1px solid #aaa;
      text-align: center;
      height: 28px;
      line-height: 28px;
      background-color: rgb(226, 226, 226);
    }
    & > .shop:nth-child(3n) {
      border-right: 0px solid rgba(255, 255, 255, 0);
    }
    .shopOn {
      background-color: red;
      color: white;
    }

    .item-img {
      float: left;
      margin-right: 20px;
      width: 50px;
      height: 40px;
      margin-top: 20px;
      line-height: 60px;
    }
    .item-box {
      float: left;
      font-size: 14px;

      .serve {
        float: left;
      }
      .price {
        float: right;
        margin-left: 26px;
      }
      .serve,
      .price {
        p {
          float: right;
          color: red;
        }
      }
    }
  }
}
</style>